<template>
  <div class="view-container">
    <div class="main-content">
      <div class="list-container" style="padding-top: 0">
        <div class="my-tabs-container">
          <div class="my-tabs">
            <el-tabs v-model="activeName" style="width:100%" @tab-click="handleClick">
              <el-tab-pane label="潜在代理" name="potentialAgent"/>
              <el-tab-pane label="签约代理" name="signedAgent"/>
            </el-tabs>
            <el-button
                v-auth="{v:['crm:marketing:cooperationInformation:enterprise:create'],bool:activeName === 'potentialAgent'}"
                class="main-btn" size="small" type="primary" @click="handlNew">新建代理
            </el-button>
          </div>
        </div>
        <component :is="activeName" ref="refComponent"/>
      </div>

    </div>
  </div>
</template>

<script>
import {defineAsyncComponent, reactive, toRefs,} from "vue";

export default {
  name: "Index",
  components: {
    potentialAgent: defineAsyncComponent(() =>
        import("../potentialAgent/index.vue")
    ),
    signedAgent: defineAsyncComponent(() => import("../signedAgent/index.vue")),
  },
  setup() {
    const data = reactive({
      activeName: "potentialAgent",
      refComponent: null,
    });
    const handlNew = () => {
      data.refComponent.handlNew();
    };

    return {
      ...toRefs(data),
      handlNew,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
